<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    	<link rel="icon" type="image/png" href="img/favicon.png" sizes="16x16">
		<title>阿噹共享汽车-地勤车况系统</title>
		<link rel="stylesheet" href="libs/wuui/weui.min.css" />
		<style type="text/css">
		.page.pg-top{
			padding-top: 50px;
		}
		.page.pg-bottom{
			padding-bottom: 50px;
		}
		header {
			width: 100%;
			height: 50px;
			background: #01ace9;
			position: fixed;
			top: 0;
			z-index: 3;
		}
		header .back:before {
			content: " ";
			display: inline-block;
			height: 10px;
			width: 10px;
			border-width: 0 0 2px 2px;
			border-color: #fff;
			border-style: solid;
			-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		}
		
		header a.placeholder {
			display: block;
			padding: 0 20px
		}
		
		header .placeholder {
			margin: 0;
			height: 50px;
			line-height: 50px;
			background: none;
			font-size: 20px;
			color: #fff;
		}
		
		.detail .weui-panel__hd {
			padding: 7px 15px;
			background: #f8f8f8;
		}
		.detail .weui-panel__hd:after{
			left: 0;
		}
		.detail .pic .weui-media-box {
			padding: 0 0 15px;
		}
		
		.detail .pic p {
			padding: 5px 15px 0;
		}
		
		.detail .weui-panel {
			margin-bottom: 0;
		}
		
		.detail .weui-btn_primary,
		.detail .weui-btn_plain-primary {
			width: 100%;
			font-size: 16px;
		}
		.detail .weui-media-box__bd img{
			width: 100%;
			height: auto;
		}
		.detail .weui-media-box__bd .loadImg {
			text-align: center;
		}
		.detail .weui-media-box__bd .loadImg .weui-loading{
			margin: 40px;
		}
		.weui-gallery__opr{
			display: none;
		}
		</style>
	</head>

	<body ontouchstart>
		<header>
			<div class="weui-flex">
				<div><a id="titleCarNum" href="javascript:history.go(-1);" class="placeholder back">  </a></div>
			</div>
		</header>
		
		<div class="page pg-top pg-bottom detail ">
			<div class="page-bd">
				
				<!-- 处理前后图片、备注信息 -->
				<div class="weui-panel weui-panel_access">
					<div class="weui-panel__hd">处理前</div>
					<div class="weui-panel__bd pic">
						<div class="weui-media-box weui-media-box_appmsg">
							<div class="weui-media-box__bd">
								<div id="beforeImage" class="loadImg">
									<embed src="img/default.svg" style="width: 30px;height: 30px"/>
								</div>
								
								<p id="beforeDesc"></p>
								<p id="beforeTime" class="weui-media-box__desc"></p>
							</div>
						</div>
					</div>
				</div>
				
				<!-- 处理前后图片、备注信息 -->
				<div class="weui-panel weui-panel_access">
					<div class="weui-panel__hd">处理后</div>
					<div class="weui-panel__bd pic">
						<div class="weui-media-box weui-media-box_appmsg">
							<div class="weui-media-box__bd">
								<div id="afterImage" class="loadImg">
									<embed src="img/default.svg" style="width: 30px;height: 30px"/>
								</div>
								<!--<img id="afterImage" src="img/logo.png" alt="处理后图片">-->
								<p id="afterDesc"></p>
								<p id="afterTime" class="weui-media-box__desc"></p>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		
		
		
		<script type="text/javascript" src="libs/jquery-2.2.3.min.js" charset="UTF-8"></script>
		<!--weui.js需要在body里面加载才起作用-->
		<script type="text/javascript" src="libs/weui.js/weui.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/app.js" charset="UTF-8"></script>
		<script type="text/javascript">
		$(function() {
			var carId = app.getRequestParam('carId'),
				carNum = app.getRequestParam('carNum'),
				carStateId = app.getRequestParam('carStateId'),
				$back = $('#back'),
				$beforeImage = $('#beforeImage'),
				$afterImage = $('#afterImage'),
				$titleCarNum = $('#titleCarNum'),
				$beforeDesc = $('#beforeDesc'),
				$beforeTime = $('#beforeTime'),
				$afterDesc = $('#afterDesc'),
				$afterTime = $('#afterTime');
			
			$titleCarNum.html(carNum);
			
			$.ajax({
				type:"get",
				url:"/api/tukuan/mobile/car/state/get/"+carStateId,
				success: function(result){
					if(result) {
						$beforeDesc.html(undefined == result.beforeDesc || '' == result.beforeDesc ? '无备注' : result.beforeDesc) ;
						$beforeTime.html(result.beforeTime) ;
						
						$afterDesc.html(undefined == result.afterDesc || '' == result.afterDesc ? '无备注' : result.afterDesc) ;
						$afterTime.html(result.afterTime) ;
						
    					app.loadImage(result.beforeImageUrl, function() {
    						$beforeImage.html(this);
    						$(this).on('click', function(){
    							weui.gallery(this.src);	
    						});
    						
    					});
    					app.loadImage(result.afterImageUrl, function() {
    						$afterImage.html(this);
    						$(this).on('click', function(){
    							weui.gallery(this.src);	
    						});
    					});
    					
					}
				},
				error: function() {}
			});

		});
		</script>
	</body>

</html>